<template>
  <div class="app-container">
    <el-card>
      <!-- 操作区域 -->
      <el-row type="flex" justify="space-between">
        <el-col :span="18">
          <el-form inline :model="formData">
            <el-form-item prop="student_name">
              <el-input
                v-model="formData.student_name"
                size="small"
                placeholder="学员姓名"
              />
            </el-form-item>
            <el-form-item prop="subject_id">
              <el-select
                v-model="formData.subject_id"
                size="small"
                clearable
                placeholder="归属学科"
                @change="changeSubject"
              >
                <el-option
                  v-for="item in treeData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="class_id">
              <el-select
                v-model="formData.class_id"
                size="small"
                clearable
                placeholder="归属班级"
              >
                <el-option
                  v-for="item in classList"
                  :key="item.id"
                  clearable
                  :label="item.class_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="student_state">
              <el-select
                v-model="formData.student_state"
                clearable
                size="small"
                placeholder="账号状态"
              >
                <el-option label="待审核" value="1" />
                <el-option label="正常" value="2" />
                <el-option label="禁用" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                size="small"
                @click="onSubmit"
              >搜索</el-button>
              <el-button size="small" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <div class="btn-col4">
            <el-button
              type="primary"
              size="small"
              plain
              @click="multiexport"
            >批量导入</el-button>
            <el-button
              type="warning"
              size="small"
              plain
              @click="addFn"
            >增加学员</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="isShow">
        <el-button
          size="small"
          type="success"
          @click="multiEnable"
        >批量启用</el-button>
        <el-button
          size="small"
          type="warning"
          @click="multiDisable"
        >批量禁用</el-button>
        <el-button
          size="small"
          type="danger"
          @click="multiDelete"
        >批量删除</el-button>
      </el-row>
      <!-- 表格区域 -->
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @select-all="selectAll"
        @select="select"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="student_name" label="学生姓名" />
        <el-table-column prop="student_phone" label="手机号" />
        <el-table-column prop="class_name" label="班级名称" />
        <el-table-column prop="subject_name" label="学科名称" />
        <el-table-column
          prop="student_sex"
          label="性别"
          :formatter="formatSex"
        />
        <el-table-column prop="student_state" label="状态">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.student_state == '1'
                  ? 'warning'
                  : scope.row.student_state == '2'
                    ? 'success'
                    : 'danger'
              "
              disable-transitions
            >{{
              scope.row.student_state == "2"
                ? "正常"
                : scope.row.student_state == "1"
                  ? "待审核"
                  : "禁用"
            }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="创建人" />
        <el-table-column prop="created_at" label="创建时间" width="160" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="editFn(row.id)"
            />
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="delFn(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页区域 -->
      <el-pagination
        :current-page.sync="pageData.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </el-card>
    <addStudent c :tree-data="treeData" @updateList="getStudentList" />
    <UploadExcel
      ref="UploadExcel"
      :upload-show="uploadShow"
      :file-info="fileInfo"
      @close="close"
      @uploadData="uploadData"
    />
  </div>
</template>

<script>
import UploadExcel from '@/components/UploadExcel'
import addStudent from './components/addStudent.vue'
import {
  getStudentList,
  getSubjectTree,
  getSubjectClass,
  getStudentInfo,
  delStudent,
  multiEnable,
  multiDisable,
  multiDelete,
  multiExport
} from '@/api/studenets'
export default {
  components: {
    addStudent,
    UploadExcel
  },
  data() {
    return {
      fileInfo: {
        name: '学生信息模板.xls',
        url: '../../../static/student.xls'
      },
      uploadShow: false, // 批量导入弹框显示
      isShow: false, // 控制批量启用等三个按钮的显示隐藏
      formData: {
        // 搜索框变量
        student_name: '',
        class_id: '',
        subject_id: '',
        student_state: ''
      },
      total: 0, // 数据总条数
      list: [], // 列表数据
      pageData: {
        // 初始化数据
        page: 1,
        limit: 10
      },
      treeData: [], // 归属学科
      classList: [], // 归属班级
      multipleSelection: [] // 定义批量操作的数组变量
    }
  },
  created() {
    // 调用列表数据
    this.getStudentList()
    this.getSubjectTree()
  },
  methods: {
    // 点击批量导入
    multiexport() {
      // this.$refs.UploadExcel.uploadShow = true
      this.uploadShow = true
    },
    // 导入弹框关闭事件
    close(type) {
      console.log(type)
      this.uploadShow = type
    },
    // 点击批量导入弹窗上传数据按钮
    async uploadData(list) {
      console.log(list)
      const res = await multiExport({
        list
      })
      console.log(res)
    },
    // 手动勾选全选 Checkbox 时触发的事件,拿到当前所有全选的id值
    selectAll(selection) {
      this.isShow = true
      // console.log(selection) // 拿到当前页的十条数据组成的数组
      selection.forEach((item) => {
        // console.log(item.id)
        this.multipleSelection.push(item.id)
      })
      // console.log(this.multipleSelection)
    },
    // 手动勾选单个 Checkbox 时触发的事件,拿到当前所有全选的id值
    select(selection, row) {
      this.isShow = true
      console.log(selection, 'ssssssss,被选中的所有行')
      console.log(row, 'rrrrrrrrrr,被选中的当前行')
      const temp = []
      selection.forEach((item) => {
        console.log(item.id)
        temp.push(item.id)
      })
      console.log(temp, 'temp')
      this.multipleSelection = [...temp]
      console.log(this.multipleSelection, 'multipleSelection')
    },
    // 点击批量启用
    async multiEnable() {
      await this.$confirm(
        `确认启用这${this.multipleSelection.length}条数据吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      const res = await multiEnable({
        status: 2,
        id: this.multipleSelection
      })
      console.log(res)
      this.getStudentList()
      this.multipleSelection = []
      this.isShow = false
    },
    // 点击批量禁用
    async multiDisable() {
      await this.$confirm(
        `确认禁用这${this.multipleSelection.length}条数据吗?此操作不可恢复`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      const res = await multiDisable({
        status: 3,
        id: this.multipleSelection
      })
      console.log(res)
      this.getStudentList()
      this.multipleSelection = []
      this.isShow = false
    },
    // 点击批量删除
    async multiDelete() {
      await this.$confirm(
        `确认删除这${this.multipleSelection.length}条数据吗?此操作不可恢复`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      await multiDelete({
        id: this.multipleSelection
      })
      this.getStudentList()
      this.multipleSelection = []
      this.isShow = false
    },
    // 添加学员 // 打开弹框
    addFn() {
      this.$refs.addStudent.dialogShow = true
    },
    // 点击编辑,回显
    async editFn(id) {
      const res = await getStudentInfo(id)
      console.log(res)
      this.$refs.addStudent.formData = res
      this.$refs.addStudent.dialogShow = true
    },
    // 删除事件
    async delFn(id) {
      // 弹出确认框
      await this.$confirm('确认删除吗')
      // 发生删除请求
      await delStudent({ id: [id] })
      // 提示成功
      this.$message.success('删除成功')
      // 边缘问题：如果不是第一页，且这一页只有一个，且删除成功，页码需要-1
      if (this.pageData.page > 1 && this.list.length === 1) {
        this.pageData.page--
      }
      // 列表更新
      this.getStudentList()
    },
    // 格式化性别
    formatSex(row, column, cellValue, index) {
      // 要去找 1所对应的值
      if (cellValue === 1) {
        return '男'
      }
      if (cellValue === 2) {
        return '女'
      }
    },
    // 选择学科
    async changeSubject(event) {
      console.log(event)
      const res = await getSubjectClass({
        subject_id: event,
        page: 1,
        limit: 1000
      })
      // console.log(res)
      this.classList = res.list
    },
    // 获取列表数据
    async getStudentList() {
      const res = await getStudentList({ ...this.pageData, ...this.formData })
      // console.log(res)
      this.list = res.list
      this.total = res.total
    },
    // 获取学科
    async getSubjectTree() {
      const res = await getSubjectTree()
      // console.log(res)
      this.treeData = res
    },
    // 每页数量变化的时候
    sizeChange(newSize) {
      // newSize 最新的每页数量
      this.pageData.limit = newSize
      this.getStudentList()
    },
    // 页码变化事件
    currentChange(newPage) {
      // newPage 最新的页码
      this.pageData.page = newPage
      this.getStudentList()
    },
    // 搜索提交
    onSubmit() {
      // 页码变成1
      this.pageData.page = 1
      // 拉取列表
      this.getStudentList()
    },
    // 搜索重置
    onReset() {
      // 重置搜索表单
      this.formData = {
        student_name: '',
        class_id: '',
        subject_id: '',
        student_state: ''
      }
      // 拉取列表
      this.getStudentList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .btn-col4 {
  margin-top: 6px;
}
</style>
